<template>
  <div class="comments-management">
    <div class="header">
      <h2>评论管理</h2>
    </div>

    <!-- 搜索表单 -->
    <el-form :model="searchForm" inline class="search-form">
      <el-form-item label="模块">
        <el-select v-model="searchForm.module" placeholder="请选择模块" clearable>
          <el-option label="帖子" value="post" />
        </el-select>
      </el-form-item>
      <el-form-item label="关联ID">
        <el-input v-model="searchForm.fid" placeholder="请输入关联ID" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 评论表格 -->
    <el-table :data="comments" v-loading="loading" border>
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="user_nickname" label="评论人" width="120" />
      <el-table-column prop="content" label="评论内容" min-width="300">
        <template #default="{ row }">
          <div class="comment-content">{{ row.content }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="module" label="模块" width="80" />
      <el-table-column prop="fid" label="关联ID" width="80" />
      <el-table-column prop="comment_time" label="评论时间" width="180">
        <template #default="{ row }">
          {{ formatDateTime(row.comment_time ?? row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="{ row }">
          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/api/request'
import { formatDateTime } from '@/utils'

const loading = ref(false)

const searchForm = reactive({
  module: '',
  fid: ''
})

const comments = ref<any[]>([])

const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 获取评论列表
const fetchComments = async (page = 1) => {
  loading.value = true
  try {
    const params = {
      page: page,
      page_size: pagination.size
    }
    
    // 移除无用的属性赋值
    
    const response = await request.get('/health/comments/', { params })
    comments.value = response.results || []
    pagination.total = response.count || 0
  } catch (error) {
    ElMessage.error('获取评论列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  fetchComments()
}

// 重置搜索
const handleReset = () => {
  Object.assign(searchForm, { module: '', fid: '' })
  pagination.current = 1
  fetchComments()
}

// 删除评论
const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm('确定删除该评论吗？', '提示', {
      type: 'warning'
    })
    
    await request.delete(`/health/comments/${row.id}/`)
    ElMessage.success('删除成功')
    fetchComments()
  } catch (error) {
    // 用户取消删除或删除失败
  }
}

// 分页大小改变
const handleSizeChange = (val: number) => {
  pagination.size = val
  fetchComments()
}

// 当前页改变
const handleCurrentChange = (val: number) => {
  pagination.current = val
  fetchComments(val)
}



onMounted(() => {
  fetchComments()
})
</script>

<style scoped>
.comments-management {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}

.comment-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>